<template>
	<view style="background-color: rgb(67, 70, 103);height: 100%;padding-bottom: 50rpx;">
		<!-- 导航栏 -->
		<u-navbar 
					back-icon-color='#FFFFFF' 
					:border-bottom="false" 
					title-color="#FFFFFF" 
					title="77合伙人	" 
					title-size="32"
					title-width="500" 
					:background="background"
				>
		</u-navbar>
		<view class="header">
			<view class="content">
				<view class="header-title flex flex-jc-sa">
					<view>
						<view class="logo-bg">
							<view class="logo">
								<image :src="icons[0].imgSrc" style="width: 71rpx;height: 71rpx;"></image>
							</view>
						</view>
					</view>
					<view>
						<view class="logo-bg">
							<view class="logo">
								<i-icon :icon="icons[1].imgSrc" size="71rpx"></i-icon>
							</view>
						</view>
					</view>
					<view>
						<view class="logo-bg">
							<view class="logo">
								<i-icon :icon="icons[2].imgSrc" size="71rpx"></i-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="header-title" style="font-size: 24rpx;">
					<view class="logo-text flex flex-jc-sa">
						<view>合伙人专属徽章</view>
						<view>好友购车分佣</view>
						<view>
							<view>
								<view>好友洗车、保养、</view>
							</view>
							<view>维修分佣</view>
						</view>
					</view>
				</view>
				<view class="header-footer">
					<view>开放&共享汽车产业生态</view>
					<view>亿万汽车产业消费市场高佣普惠</view>
					<view class="describe">
						<view>为您和您的朋友提供买车、洗车、保养、维修、</view>
						<view>保险、加油等消费返利和优惠福利</view>
					</view>
				
				</view>
			</view>
		</view>
		
		<!-- 77合伙人 -->
		<view class="partner">
			<view class="hhr" @click="goPage('/pages_common/pages_me/strategy/strategy')">合伙人攻略</view>
			<view class="logo">
				<image src="https://files.yzsheng.com/client/me/img/huizhang.png"></image>
			</view>
			
			<!-- //刻度 -->
			<view class="scale">
				<view class="list">
					<view class="number">
						<view class="line">
							<view class="line-left">0</view>
						</view>
						<view class="line">
							<view class="line-left-s"></view>
						</view>
					</view>
					<view class="number">
						<view class="line">
							<view class="line-num">25</view>
						</view>
						<view class="line">
							<view class="line-s"></view>
						</view>
					</view>
					<view class="botline">
						<!-- 放大 -->
						<view class="enlarge">
							<view class="enlarge-main" :style="{left:percent-9 + '%'}">
								<view style="color: #FFFFFF;">
									<text>{{percent/4}}</text>
									<text>/25</text>
								</view>
							</view>
							
						</view>
						<view class="topline" :style="{width:percent + '%'}"></view>
						<view class="left"></view>
						<view class="right" :style="{left:percent + '%'}"></view>
					</view>
					<view class="flex" style="width: 537rpx;margin: 0 auto;">
						<view class="pack" v-for="(item,index) in 24" :key='index'>
							<view class="kd"></view>
						</view>
					</view>
					<view class="more flex flex-jc-sb">
						<view>还需要邀请{{25-percent/4}}名好友</view>
					</view>
					<view class="no">
						<view v-if="percent>=25">解锁</view>
						<view v-else>未解锁</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<swiper :current="currentIndex" :circular="true" :interval="3000"  class="sub"
			 :duration="1000" :autoplay="true" :vertical="true">
				<swiper-item v-for="(item,index) in info" class="flex flex-jc-c flex-ai-c" :key='index'>
					<view class="sub-img">
						<i-icon icon="iconwenhao" size="44rpx"></i-icon>
					</view>
					<view>163******654</view>
					<view>成功拿到佣金</view>
					<view>{{item.money}}元</view>
				</swiper-item>
			 </swiper>
			<!-- <view v-for="(item,index) in info" class="flex flex-jc-c flex-ai-c">
				<view><image :src="item.headImg"></image></view>
				<view class="sub-img">
					<i-icon icon="iconwenhao" size="44rpx"></i-icon>
				</view>
				<view>163******654</view>
				<view>成功拿到佣金</view>
				<view>{{item.money}}元</view>
			</view> -->
		</view>
		
			
		<view class="profit">
			<view class="order">
				<view class="flex flex-jc-sb">
					<view style="padding:20rpx; 0">我的收益</view>
					<!-- 左边 -->
					<view class="flex flex-ai-c" @click="goPage('/pages_userModule/incomeExpenditur/incomeExpenditur')">
						<view class="look">收益详情</view>
						<view><u-icon name="arrow-right" color="#989898" size="15"></u-icon></view>
					</view>
				</view>
			
				<!-- 图标 -->
				<view class="flex flex-jc-c"  @click="goPage('/pages_userModule/my_earnings/my_earnings')">
					<view class="total">
						<view class="total-price">{{shareInfo.allMoney}}</view>
						<view class="total-text">总收益（元）</view>
					</view>
				</view>
			</view>
		</view>
			
		<view class="invitation">
			<!-- 优惠券 -->
			<view class="coupon">
				<!-- 标题 -->
				<view class="coupon-title">
					<view>您还未成功邀请好友</view>
					<view>丰厚的邀请奖励等你来领</view>
				</view>

				<!-- 优惠券卡片 -->
				<view class="coupon-card">
					<view style="text-align: center;">
						<view>
							<image src="https://files.yzsheng.com/client/me/img/youhuiquan1.png" style="width: 627rpx;height: 209rpx;"></image>
						</view>
						<view>
							<image src="https://files.yzsheng.com/client/me/img/youhuiquan2.png" style="width: 627rpx;height: 209rpx;"></image>
						</view>
					</view>
				</view>
				<!-- <view class="coupon-card" v-for="(item,index) in 2" :key='index'>
					<view class="coupon-card-content flex">
						<view class="coupon-card-content-left">
							<view class="each">你和好友各得</view>
							<view class="number">1张全城<text>免费洗车券</text></view>
							<view class="time flex">
								<view>领取后30天有限</view>
								<view>*不可叠加</view>
							</view>
						</view>
						<view style="margin-left: 20rpx;"><u-line color="#C7C7C7" border-style="dashed" direction="col"/></view>
						<view class="coupon-card-content-right">
							<view>1000元</view>
						</view>
					</view>
				</view> -->

				<!-- 立即邀请 -->
        <!-- #ifndef MP-WEIXIN -->
				<view class="btn flex flex-jc-c" @click="show=true">
					立即邀请
				</view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
         <button open-type="share" class="btn flex flex-jc-c">立即邀请</button>
        <!-- #endif -->
				<!-- 用户数据量 -->
				<view class="user" @click="lxr">99%的用户都在这里<u-icon name="arrow-right-double" size="20"></u-icon>
				</view>

			</view>

			<!-- 我的成就 -->
			<view class="achievement">
				<view class="flex flex-jc-sb achievement-head">
					<view class="right flex flex-ai-c">
						<view>
							<i-icon icon="iconfapiao1" color="#FBD220"></i-icon>
						</view>
						<view class="me">我的成就</view>
					</view>
					<view class="left flex flex-ai-c">
						<view class="look" @click="frieed">查看邀请记录</view>
						<view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="achievement-me flex flex-jc-sa flex-ai-c">
					<view class="achievement-me-top">
						<view class="num"><text>{{shareInfo.shareCount}}</text>人</view>
						<view class="describe">我邀请的</view>
					</view>
					<view class="achievement-me-top">
						<view class="num"><text>{{shareInfo.allShareCount}}</text>人</view>
						<view class="describe">所有邀请</view>
					</view>
					<view class="achievement-me-top">
						<view class="num"><text>{{shareInfo.dayShareCount}}</text>人</view>
						<view class="describe">今日增加</view>
					</view>
					<view class="achievement-me-top">
						<view class="num"><text>{{shareInfo.allMoney}}</text>元</view>
						<view class="describe">我的收益</view>
					</view>
				</view>
			</view>
		</view>
		
		<share v-model='show' @change='goPartner' :isDownload='false'></share>
	</view>
</template>

<script src='./partner.js'></script>

<style lang="scss" scoped>
	@import './partner.scss';

</style>
